<template>
  <div class="topicDetail">
    <!-- 信息 -->
    <div v-html="info.content" class="info"></div>
    <!-- 列表 -->
    <ul class="list">
      <div class="title">专题推荐</div>
      <li class="item" v-for='item in list' :key='item.id'>
        <img :src="item.scene_pic_url" alt="">
        <div class="name">{{item.title}}</div>
      </li>
    </ul>
  </div>
</template>

<script>
import { detailaction } from "@/api/topic";
export default {
  data() {
    return {
      info: "", // 分类详情
      list: [], // 列表
    };
  },
  // 计算
  computed: {},
  // 创建
  created() {
    // 详情加下方四个专题推荐
    detailaction({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      this.info = res.data.data;
      this.list = res.data.recommendList;
    });
  },
  // 准备
  mounted() {},
  // 方法
  methods: {},
};
</script>

<style lang='scss' scoped>
.topicDetail {
  // 信息
  .info {
    ::v-deep img {
      width: 100%;
      // 去除缝隙
      vertical-align: top;
    }
  }
  // 列表
  .list {
    width: calc(100% - 30px);
    margin: 0 auto;
    .title {
      padding: 15px 0;
      margin: 15px auto;
      color: #999;
      font-size: 16px;
    }
    .item {
      background-color: #fff;
      padding: 12px 12px 15px;
      margin-bottom: 15px;
      img {
        width: 321px;
        height: 139px;
        vertical-align: top;
      }
      .name {
        text-align: left;
        font-size: 14px;
        margin: 14px auto 14px;
      }
    }
  }
}
</style>